<template>
    <div >
    <div class="homeDiv" >
        <table >
            <tr>
                <td v-if="mobileShow" style="width: 10%;vertical-align: top">
                      <div>
                      </div>
                </td>
                <td  style="width: 30%;vertical-align: top">
<!--                    <div v-if="mobileShow" class="adDiv">-->
<!--                        <table style="width: 100%;height: 100%">-->
<!--                            <tr>-->
<!--                                <td style="width: 70%;" valign="top">-->
<!--                                    <div style="width: 100%;height: 100%">-->
<!--                                        <el-carousel  >-->
<!--                                           <template v-for="item in newsList">-->
<!--                                               <el-carousel-item   @click="_clickCarousel(item)">-->
<!--                                                   <div>-->
<!--                                                       <img class="img" :src="item.imgUrl" />-->
<!--                                                       <p style="position: absolute;left: 30px;top: 210px;font-size: 20px;color: white">-->
<!--                                                           {{item.name}}</p>-->
<!--                                                   </div>-->
<!--                                               </el-carousel-item>-->
<!--                                           </template>-->
<!--                                        </el-carousel>-->
<!--                                    </div>-->
<!--                                </td>-->
<!--                                <td style="width: 30%;height: 100px" valign="top">-->
<!--                                    <div style="width: 100%;height: 100%">-->
<!--                                        <template  v-for="item in recommendList">-->
<!--                                            <div style="margin: 0 auto;position: relative;z-index: 1;">-->
<!--                                                <img :src="item.imgUrl" @click="_clickCarousel(item)" />-->
<!--                                                <p style="position: absolute;left: 10px;top: 200px;font-size: 10px;color: white">-->
<!--                                                    {{item.name}}</p>-->
<!--                                            </div>-->
<!--                                        </template>-->
<!--                                    </div>-->

<!--                                </td>-->
<!--                            </tr>-->
<!--                        </table>-->
<!--                    </div>-->
                    <div class="adDiv">
                        <template style="list-style: none;margin-top: 1px;margin-left: 1px;width: 100%;" v-for="item in blogList">

                           <ul  style=" list-style: none;text-align: left;margin-left: -20px">
                               <li style="text-align: left;margin-top: 1px"><a :href="'/#/blog_detail?id='+item.id" style="font-size: 23px;font-weight: bold" class="a">{{item.title}}</a></li>
                               <li style="display:inline-block;width: 100%">

                                   <table style="width: 100%">
                                       <tr>
                                           <td style="width: 5%">
                                               <el-popover
                                                       placement="top-start"
                                                       title=""
                                                       :width="230"
                                                       trigger="hover"
                                                       content="" >
                                                   <div>
                                                       <table >
                                                           <tr>
                                                              <td >
                                                                  <el-avatar :size="50" :src="item.avatarUrl"></el-avatar>
                                                              </td>
                                                              <td >
                                                                  {{item.authorName}}
                                                              </td>
                                                           </tr>

                                                           <el-divider></el-divider>

                                                           <tr>
                                                                 <td >
                                                                     <el-button  v-if="item.fans===0" @click="payAuthor(item)" size="mini" style="color: white;background-color: #CA0C16;width: 60px">关注</el-button>
                                                                     <el-button  v-else size="mini" @click="payNotAuthor(item)" style="color: black;width: 60px">已关注</el-button>
                                                                 </td>
                                                               <td> <span style="color: #CFCFCF;font-size: 13px">粉丝 {{item.fansQuality}}</span></td>
                                                               <td ><a :href="'/#/user_center?id='+item.authorId" style="color: #59ACEE;text-decoration:none;text-align: right">访问主页</a></td>
                                                           </tr>
                                                       </table>
                                                   </div>


                                                   <template #reference>
                                                       <el-avatar :size="30" :src="item.avatarUrl"></el-avatar>
                                                   </template>
                                               </el-popover>
                                           </td>
                                           <td style="white-space:nowrap;">
                                               {{item.authorName}}
                                           </td>

                                           <td  style="color: #8a8a8a;"><span class="zj_name">{{item.name}}</span></td>
                                       </tr>
                                   </table>
                                   </li>
                               <li style="display:inline-block;width: 100%">
                                   <table>
                                       <tr>

                                           <td><p class="el-icon-s-custom"></p></td>
                                           <td style="white-space:nowrap;">
                                              <a style="margin-right: 10px; color: #b4b4b4;text-decoration:none;" :href="'/#/user_center?id='+item.authorId"> {{item.authorName}}</a>
                                           </td>
                                           <td>
                                               <div v-if="item.praise===0" @click="_praise(item)" style="color: #b4b4b4;"><p class="el-icon-thumb"></p>点赞{{item.praiseQuantity}}</div>
                                               <div v-else @click="_praiseNot(item)"><p class="el-icon-thumb"></p>点赞{{item.praiseQuantity}}</div>
                                           </td>
                                           <td style="margin-left: 1px">
                                               <div style="color: #b4b4b4;"><p class="el-icon-s-comment"></p>评论{{item.commentNum}}</div>
                                           </td>
                                       </tr>
                                   </table>
                               </li>
                           </ul>


                            <el-divider style="width: 100%;margin-top: 0px;margin-bottom: 0px"></el-divider>

                        </template>
                    </div>


                    <el-button @click="pullMore" v-if="readMore"  style="border-radius: 15px;width: 100%;margin-top: 10px;background-color:  #a5a5a5;color: white">查看更多</el-button>
                    <el-button v-if="haveNoData"  style="border-radius: 15px;width: 100%;margin-top: 10px;">暂无数据</el-button>
                </td>
                <td v-if="mobileShow" style="width: 15%;vertical-align: top;margin-left: 20px">

                   <div style="width: 200px;background-color: white;position: fixed;">
                       <span v-if="showYds" style="font-size: 20px;font-family: 黑体;color: #969696;">推荐文章</span>
                       <template style="list-style: none;margin-top: 2px;margin-left: 1px;width: 100%;" v-for="item in blogRecommendList">

                           <ul  style="list-style: none;text-align: left;margin-bottom: 0px;margin-top: 5px;margin-left: -20px">
                               <li style="text-align: left;margin-top: 10px">
                                   <a :href="'/#/blog_detail?id='+item.id" class="a">{{item.title}}</a>
                               </li>
                               <li style="display:inline-block;width: 100%;color: #969696;margin-bottom: 5px">
                                  阅读数 {{item.browseQuantity}}
                               </li>
                           </ul>


                           <el-divider style="width: 100%;margin-top: 0px;margin-bottom: 0px"></el-divider>

                       </template>

                     <div v-if="showYds" style="width: 200px;height: 200px;background-color: #a0cfff;margin-top: 10px;">
                       <img style="width: 200px;height: 200px" src="../../static/yds.jpg"/>
                     </div>

                     <div style="margin-top: 10px;">
                       <aside v-if="adShow">
                         <img @click="openAd(ad.link)" style="width: auto;height: auto" :src="ad.imgUrl">
                         <a v-if="showYds" style="float: right;margin-right: -12px" @click="del">X</a>
                       </aside>
                     </div>
                   </div>





                </td>
            </tr>
        </table>

    </div>
            <ToLogin ref="toLoginRef" @loginBack="loginBack"></ToLogin>
    </div>
</template>
<script>
    import {getCookie, getReq, postReq} from '../utils/api'
    import ToLogin from '../views/ToLogin'
    export default {
        mounted(){
            let vm = this;
            $(window).resize(function() {
                console.log($(window).height());
                vm.tableHeight = $(window).height() - 200;
            });

            if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
                this.mobileShow=false
            }else{

            }
            this._page();

        },


        name: 'Blog',
        components:{
            ToLogin
        },
        data() {
            return {
                mobileShow:true,
                adShow:true,
                showYds:false,
                readMore:false,
                haveNoData:false,
                pageNum:1,
                screenWidth: document.body.clientWidth,
                activeIndex: '1',
                activeIndex2: '1',
                input:'',
                url :'static/logo.png',
                newsList:[],
                ad: {},
                recommendList:[],
                blogList:[],
                blogRecommendList:[],

            };
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push({path:key,query:{}});

            },
            _clickCarousel(item){
                window.open(item.link)
            },

            _praise(item){
                // let auth= getCookie('Authorization')
                // if (undefined===auth||''===auth){
                //     this.$refs.toLoginRef._open()
                //     return false
                // }
                // item.praiseQuantity=item.praiseQuantity+1;
                // item.praise=1
                // postReq('/api/blog_praise/praise?blogId='+item.id).then(res=>{
                //     if (res.data==='未登录'){
                //         this.$refs.toLoginRef._open()
                //     }
                // }).catch(err=>{
                //     console.log(err)
                // });
            },
            _praiseNot(item){
                // let auth= getCookie('Authorization')
                // if (undefined===auth||''===auth){
                //     this.$refs.toLoginRef._open()
                //     return false
                // }
                // item.praiseQuantity=item.praiseQuantity-1;
                // item.praise=0
                // postReq('/api/blog_praise/praise_not?blogId='+item.id).then(res=>{
                //     let data= res.data.data;
                //     if (res.data==='未登录'){
                //         this.$refs.toLoginRef._open()
                //     }
                // }).catch(err=>{
                //     console.log(err)
                // });
            },

            loginBack(){
                this.$emit('viewIn')
            },

            _page(){
             
                   this._cmsAd();
                this.pageNum=1
                postReq('/api/blog/page_blog_vo?rows='+10+'&page='+this.pageNum,{}).then(res=>{
                    let page = res.data.data
                    this.pageNum = page.pageNum+1
                    this.blogList=res.data.data.records;
                     this._recommendList();
                  // this._cmsNews();
          
                  this.showYds=true;
                  // this._recommendNews();
                    this.$emit('viewIn')
                    if (page.pages<=page.pageNum){
                        this.haveNoData=true
                    }else{
                        this.readMore=true
                    }
                })
            },

            _recommendList(){
                postReq('/api/blog/list_recommend',{}).then(res=>{
                    console.log('---res---',res)
                    console.log('---res.data---',res.data)
                    this.blogRecommendList=res.data.data;
                })
            },

            _cmsNews(){
                getReq('/api/cms_news/list',{}).then(res=>{
                    this.newsList=res.data.data;
                })
            },

            _cmsAd(){
                getReq('/api/cms_ad/get_ad').then(res=>{
                    this.ad=res.data.data;
                })
            },
            _recommendNews(){
                getReq('/api/cms_recommend/list',{}).then(res=>{
                    this.recommendList=res.data.data;
                })
            },
            del(){
                this.adShow = false
            },
            openAd(url){
                window.open(url)
            },
            payAuthor(item){
                let auth= getCookie('Authorization')
                if (undefined===auth||''===auth){
                    this.$refs.toLoginRef._open()
                    return false
                }
                item.fans=1
                item.fansQuality=item.fansQuality+1
                this.blogList.forEach(function (obj) {
                    if (obj.authorId === item.authorId) {
                        obj.fans=1;
                        console.log(obj);
                    }
                });
                postReq('/api/blog_fans/attention?id='+item.authorId).then(res=>{
                    console.log(res)
                })
            },
            payNotAuthor(item){
                let auth= getCookie('Authorization')
                if (undefined===auth||''===auth){
                    this.$refs.toLoginRef._open()
                    return false
                }
                item.fans=0
                item.fansQuality=item.fansQuality-1
                this.blogList.forEach(function (obj) {
                    if (obj.authorId === item.authorId) {
                        obj.fans=0;
                        console.log(obj);
                    }
                });
                postReq('/api/blog_fans/not_attention?id='+item.authorId).then(res=>{

                })
            },
            pullMore(){
                postReq('/api/blog/page_blog_vo?rows='+10+'&page='+this.pageNum,{}).then(res=>{
                    let page = res.data.data
                    if (page.pages<=page.pageNum){
                        this.readMore=false
                        this.haveNoData=true
                    }else{
                        this.readMore=true
                        this.haveNoData=false
                    }
                    this.pageNum = page.pageNum+1
                    let listData =  this.blogList;
                    res.data.data.records.forEach(function (obj) {
                        listData.push(obj)
                    });
                    this.blogList=listData

                })
            },

        }
    }
</script>
<style>

    #zxd_x{width:20px;
        height:20px;
        text-align:center;
        font-size:16px;
        color:red;
        position:absolute;
        right:0px;
        top:0px;
        cursor:pointer;}

    .homeDiv{
        /*background-color: #f3f5f7;*/
    }
    .uls{
        padding: 0px 0px 0px 160px;
        list-style: none;
    }
    .uls li{
        background-color: white;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    .uls li a{
        text-decoration: none;
        color: black;
    }
    .uls li:hover, a:active{
        background-color:#BE3948;
        /*color:white;*/
    }


    .adDiv{
        background-color: white;
    }

    a:hover{color:#F00}

    .zj_name{
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space:nowrap;
        width:420px;
        height:24px;
        display:block;
    }



    .img{
        min-width: 100%;
        min-height: 100%;
    }



    aside{
        width: 210px;height: 200px;
        /*background-color: #a0cfff;*/
        /*position: fixed;*/
        /*display: flex;*/
        justify-content: flex-end;
    }
    .a{
        text-decoration:none;
        color: black;
        overflow: hidden;
        /*white-space: nowrap;*/
        text-overflow: ellipsis;
        width:auto;
    }
    .el-button--primary:hover{
        background-color: #FF69B4;
        border-color: #FF69B4;

    }
</style>